<ng-template #checkboxTemplate>
  <label apes-checkbox
         [class.apes-table-selection-select-all-custom]="apesShowRowSelection"
         [(ngModel)]="apesChecked"
         [apesDisabled]="apesDisabled"
         [apesIndeterminate]="apesIndeterminate"
         (ngModelChange)="apesCheckedChange.emit($event)">
  </label>
</ng-template>
<span class="apes-table-header-column">
  <div [class.apes-table-column-sorters]="apesShowSort" (click)="updateSortValue()">
    <span class="apes-table-column-title">
      <ng-container *ngIf="apesShowCheckbox && !apesShowRowSelection">
        <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
      </ng-container>
      <div class="apes-table-selection" *ngIf="apesShowRowSelection">
        <ng-container *ngIf="apesShowCheckbox">
          <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
        </ng-container>
        <div apes-dropdown class="apes-table-selection-down" apesPlacement="bottomLeft" [apesDropdownMenu]="selectionMenu">
          <i apes-icon apesType="down"></i>
        </div>
        <apes-dropdown-menu #selectionMenu="apesDropdownMenu">
          <ul apes-menu class="apes-table-selection-menu">
            <li apes-menu-item
                *ngFor="let selection of apesSelections"
                (click)="selection.onSelect()">{{selection.text}}</li>
          </ul>
        </apes-dropdown-menu>
      </div>
      <ng-content></ng-content>
    </span>
    <ng-content select="apes-dropdown"></ng-content>
    <div class="apes-table-column-sorter" *ngIf="apesShowSort">
      <div class="apes-table-column-sorter-inner apes-table-column-sorter-inner-full">
        <i apes-icon
           apesType="caret-up"
           class="apes-table-column-sorter-up"
           [class.on]="apesSort == 'ascend'"
           [class.off]="apesSort != 'ascend'"></i>
        <i apes-icon
           apesType="caret-down"
           class="apes-table-column-sorter-down"
           [class.on]="apesSort == 'descend'"
           [class.off]="apesSort != 'descend'"></i>
      </div>
    </div>
  </div>
</span>
<ng-content select="[apes-dropdown]"></ng-content>

<ng-container *ngIf="apesShowFilter">
  <i apes-icon
     apes-dropdown
     apesType="filter"
     apesTheme="fill"
     apesTrigger="click"
     apesTableFilter
     [apesClickHide]="false"
     [apesDropdownMenu]="filterMenu"
     [class.apes-table-filter-selected]="hasFilterValue"
     [class.apes-table-filter-open]="filterVisible"
     (apesVisibleChange)="dropDownVisibleChange($event)"></i>
  <apes-dropdown-menu #filterMenu="apesDropdownMenu">
    <ul apes-menu>
      <ng-container *ngIf="apesFilterMultiple">
        <li apes-menu-item *ngFor="let filter of multipleFilterList" (click)="checkMultiple(filter)">
          <label apes-checkbox [ngModel]="filter.checked" (ngModelChange)="checkMultiple(filter)"></label>
          <span>{{filter.text}}</span>
        </li>
      </ng-container>
      <ng-container *ngIf="!apesFilterMultiple">
        <li apes-menu-item *ngFor="let filter of singleFilterList" (click)="checkSingle(filter)">
          <label apes-radio [ngModel]="filter.checked" (ngModelChange)="checkSingle(filter)">{{filter.text}}</label>
        </li>
      </ng-container>
    </ul>
    <div class="apes-table-filter-dropdown-btns">
      <a class="apes-table-filter-dropdown-link confirm" (click)="hideDropDown()">
        <span>{{ locale.filterConfirm }}</span>
      </a>
      <a class="apes-table-filter-dropdown-link clear" (click)="reset();hideDropDown()">
        <span>{{ locale.filterReset }}</span>
      </a>
    </div>
  </apes-dropdown-menu>
</ng-container>
